<template>

	<div class="container">
	
			<div>msg:  {{msg}}</div>
			<div>msg | Reverse: {{msg | Reverse }}</div>
			
			
			<div>msg | Reverse|toUpper2   :   {{msg | Reverse|toUpper2 }}</div>
			
			
			<div>toUpper( mreverse(msg) ): {{ toUpper( mreverse(msg) )  }}</div>
		
			
			
	</div>
	
	
</template>

<script>
	
	
	export default{
		name:'MyForm',
		data(){
			return {
				msg:'hello  Vue',
			}
		},
		methods:{
			mreverse(value){
				return value.toString().split('').reverse().join('');
			},
			toUpper(value){
				return value.toString().toUpperCase();
			}
		},
		//局部的 过滤器
		filters:{
			Reverse: function(value) {
				if (!value){
					return '';
				} 
			
				// abc -- "abc"     --- ['a','b','c']-  ---['c','b','a'] ,  ''
				return value.toString().split('').reverse().join('');
			},
			toUpper2(value){
				return value.toString().toUpperCase();
			}
		}
		
	}
	
	
</script>

<style scoped>
	
	/**  v --> viewport */
	.container{
		margin: 50px;
		background-color: azure;
		width: 50vw;
		height: 50vh;
	}
	
	
</style>